09-13-2021

前言：
當我們需要的資料越多越繁雜時，我們所需要的是一個可以快速把按照我們所需要呈現的方式。而map()就能幫我們乾淨的印出資料。

本章內容

• map()在component的寫法
• Keys是什麼？他的存在會帶給我們什麼呢？
• Keys的使用說明書-
  • JSX中嵌入map()
  • 錯誤使用說明

map()在component的寫法

我們在創建列表的時候，若使用常規式的JavaScript即是使用for迴圈的寫法進行，事實上我們還可以使用另外一種方式進行建立-map()

使用遍歷陣列的方式印出movies的內容列表：

範例：
const movies = ["貓的報恩","齊木楠雄","小當家"]
const listItems = movies.map((movies)=>
<li>{movies}</li>
);
// 將每次回傳的<li>都存在listItem裡面


// 將listItem包在<ul>裡面，最後render到DOM上
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('Myapp')
);
// 印出
// ＊ 貓的報恩
// ＊ 齊木楠雄
// ＊ 小當家

把以上重新構建成一個component的樣子，使組件接收來自父組件的參數{prop}，每個列表的元素都要搭配上key，不然會跳出需要包含key的警告！
(key should be provided for list items)

function MovieList(props) {
  const movies = props.movies;
  const listItems = movies.map((item) =>
    <li key={item.toString()}>
      {item+2}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const movies = ["貓的報恩","齊木楠雄","小當家"];
ReactDOM.render(
  <MovieList movies={movies} />,
  document.getElementById('Myapp')
);
// 1. 在父層`<MovieList movies={movies} />`傳遞props`movies={movies}`
// 2. `MovieList(props)`，函式內傳入`props`
// 3. 定義`movies`變數承接傳遞進來的`props.mivies`
// 4. 定義要顯示的內容以變數`listItem`收起來
// 5. 使用變數`movies`來map其中的內容
// 6. 帶入顯示的map()的{item}參數
// 7. 就會顯示成`貓的報恩+2`



Keys是什麼？他的存在會帶給我們什麼呢？

> Keys的存在可以方便React識別到在DOM中有什麼元素發生了變化，所以應該要給每一個元素一個確切的標示

1. key的存在最好是在這個列表中擁有一個獨一無二的字符串，通常會使用數據data的id作為key

const todoItems = todos.map((todo) =>
// id是來自dat中的
  <li key={todo.id}>
    {todo.text}
  </li>
);

2. 當沒有明確的id時，可以使用index索引作為key

// 通常把index寫做 i 
const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
);

3. 如果列表是可以重新排序，不建議使用index索引進行排序，這會導致渲染執行時間變慢
4. key 會給React作為提示，但不會傳遞給組件，也就是說我們在前面頁面開啟檢查的時候是看不到key的存在的。
   以下的例子中就讀不到key但讀的到id

const content = Cats.map((cat) =>
  <Cat
    key={cat.id}
    id={cat.id}
    title={cat.title} />
);

5. 如果component中需要使用到和key相同的值，將其作為屬性傳遞。

Keys的使用說明書

-JSX中嵌入map()

在JSX的語法中可以在花括號內嵌入任何表達式，所以我們可以這樣使用map()

• 如果目前的map()嵌套太多層級反而會造成閱讀障礙，可以拆解出來比較好維護～

function MovieList(props) {
  const movies = props.movies;
  
  return (
    <ul>
      {movies.map((movie) =>
        <ListItem key={movie.toString()}
                  value={movie} />
 
      )}
    </ul>
  );
}

// 


function MovieList(props) {
  const movies;
// 聲明在外面是因為在{}內不能有 const \ let \ var 等字
  return (
    <ul>
      {
          movies = props.movies,
          movies.map((movie) =>
        <ListItem key={movie.toString()}
                  value={movie} />
 
      )}
    </ul>
  );
}

-錯誤使用說明

1. 元素的key只在與他相比較的兄弟節點對比時才有意義
2. 當使用map()時最好都加上key

// 孫子層
// 不能在這裡設定key
function ListItem(props) {

  return <li>{props.value}</li>;
}

// 子層
// 要在這層設定才對
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
 
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}
 
// 最高父層
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('example')
);